<table>
  <tr>
    <td>名称</td>
    <td colspan="2">{{ info.commodity_name }}</td>
  </tr>
  <tr>
    <td>售价</td>
    <td>{{ info.price }}</td>
    <td>
      <a (click)="changeParams($event, 'price', '售价')">修改</a>
    </td>
  </tr>
  <tr>
    <td>库存</td>
    <td>{{ info.num }}</td>
    <td>
      <a (click)="changeParams($event, 'num', '库存')">校正</a>
    </td>
  </tr>
  <tr>
    <td>单位</td>
    <td>{{ info.unit }}</td>
    <td>
      <a (click)="changeParams($event, 'unit', '单位')">修改</a>
    </td>
  </tr>
  <tr>
    <td>销售状态</td>
    <td [ngStyle]="{ color: info.state ? '#72dd83' : '#f00' }">
      {{ info.state ? "在售" : "已下架" }}
    </td>
    <td>
      <ng-container *ngIf="info.state; else elseTemplate">
        <a style="color: red" (click)="changeSate($event, 0)">下架</a>
      </ng-container>
      <ng-template #elseTemplate>
        <a (click)="changeSate($event, 1)">上架</a>
      </ng-template>
    </td>
  </tr>
</table>
<div style="text-align: center" *ngIf="info.state == 0">
  <button
    nz-button
    nzType="default"
    nzDanger
    id="delBtn"
    (click)="delCommodity()"
  >
    删除
  </button>
</div>
<nz-modal
  [(nzVisible)]="isVisible"
  (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()"
  nzCentered="true"
  nzCloseIcon="null"
>
  <ng-container *nzModalContent>
    <p>请输入新的{{ changeObj.CN_key }}：</p>
    <div id="newValueBox">
      <input
        [type]="changeObj.key == 'unit' ? 'text' : 'number'"
        nz-input
        [(ngModel)]="changeObj.value"
      />
    </div>
  </ng-container>
</nz-modal>
